<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 准备元素及内容 -->
    <div class="box1">冬天来了，春天还会远吗？</div>
    <p id="font">面朝大海     春暖花开</p>
    <div class="box2">蒹葭苍苍<strong>白露为霜</strong>
    所谓伊人 在水一方</div>
</body>
<script>
    const em1=document.querySelector('.box1');
    const em2=document.querySelector('#font');
    const em3=document.querySelector('.box2');
    //innerHTML:获取元素中的所有内容，包括空格、标签、换行等
    console.log(em1.innerHTML);
    console.log(em2.innerHTML);
    console.log(em3.innerHTML);
    console.log('-----------');
    //innerText:获取元素中的所有文本内容，不包括空格、标签、换行等
    console.log(em1.innerText);
    console.log(em2.innerText);
    console.log(em3.innerText);
    console.log('-----------');
    //textContent:获取元素中的所有文本内容，不包括标签
    console.log(em1.textContent);
    console.log(em2.textContent);
    console.log(em3.textContent);
    em1.innerHTML='飞流直下三千尺<br/>,疑是银河落九天';
    console.log(em1.innerHTML);
    em2.innerText='君不见高堂明镜,<strong>悲白发</strong>';
    console.log(em2.innerText);
    em3.textContent='null';
    console.log(em3.textContent);
</script>
</html>